<template>
  <div>
    <div class="order_search">
      <input type="text" placeholder="输入商品订单号" v-model="input" /><button @click="selectOrder">
        订单搜素
      </button><button @click="dele()">删除</button>
    </div>
    <div class="order_title">
      <el-row :gutter="0">
        <el-col :xs="7" :sm="7" :md="7" :lg="8" :xl="7">
          <div class="grid-content">商品信息</div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <div class="grid-content">单价</div>
        </el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content">数量</div>
        </el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content">金额</div>
        </el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="grid-content">交易状态</div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <div class="grid-content">操作</div>
        </el-col>
      </el-row>
    </div>
    <!-- 商品订单 -->
    <div class="order_goods" v-for="(item, index) in infor " :key="index">
      <div class="goods_title">
        <span>时间: {{infor[index].create_time}}-{{index}}</span>
        <span>订单号：{{infor[index].order_sn}}</span>
      </div>
      <div class="order_message">
        <el-row :gutter="0">
          <el-col :xs="7" :sm="7" :md="7" :lg="8" :xl="7">
            <div class="grid-content lef">
                <img :src="infor[0].url" alt="">
                <div class="goods_infor">
                    {{infor[0].message}}
                </div>
            </div>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <div class="grid-content ">￥{{infor[0].money}}</div>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <div class="grid-content">{{infor[0].num}}</div>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <div class="grid-content">￥44</div>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <div class="grid-content">
                <p>待付款</p>
            </div>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <div class="grid-content">
                <button>删除</button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      params: {
        createTime: '',
        key: '运动'
      },
      infor: [
        { time: '2020-2-5', id: 123457893, num: 2, url: 'https://img0.baidu.com/it/u=2972251030,4111072434&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', message: '休闲', sta: 1, money: 33 }
      ]
    }
  },
  methods: {
    selectOrder () {
      this.$axios.get('/order/14', {
        headers: {
          authorization: sessionStorage.getItem('token')
        },
        params: {
          key: '大'
        }
      }).then((res) => {
        console.log(res)
      }).catch(err => {
        console.error(err)
      })
    },
    dele () {
      this.$axios.delete('/order/30', {
        headers: {
          authorization: sessionStorage.getItem('token')
        }
      }).then((res) => {
        console.log(res)
      }).catch(err => {
        console.error(err)
      })
    }
  },
  created () {
    this.$axios.get('/order/1/20', {
      headers: {
        authorization: sessionStorage.getItem('token')
      },
      params: {
        key: '大'
      }
    }).then((res) => {
      console.log(res.data.data)
      this.infor = res.data.data.records
    }).catch(err => {
      console.error(err)
    })
  }
}
</script>
<style lang="less" scoped>
.grid-content {
    text-align: center;
    line-height: 35px;
}
.lef{
    text-align: left;
}
.order_title {
  width: 80vw;
  margin-top: 20px;
  margin-bottom: 40px;
  .grid-content {
    background-color: rgb(235, 235, 235);
    }
}
.order_goods {
  width: 80vw;
  height: 170px;
  margin: 0 auto 20px auto;
  background-color: #fff;
  border-bottom: 1px solid rgb(199, 216, 216);
  border-radius: 20px;
  .goods_title {
    height: 50px;
    background: rgb(235, 235, 235);
    line-height: 50px;
    span {
      padding: 0 20px;
    }
  }
}
.order_message{
    padding: 20px;
    img{
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }
    .goods_infor{
        overflow: hidden;
        display: inline-block;
    }
}
</style>
